<template>
    <div>
        <Modal v-model="login" @on-cancel="colseBox" :footer-hide="true" class-name="vertical-center-modal" width="968" height="332">
            <div class="login-box clearfix">
                <div class="login-box-left">
                    <div class="login-name">
                        <span class="login-pic">
                            <img src="../assets/img/login/login.png" alt="">
                        </span>
                        <span class="logo-tit">简单约玩，约玩简单</span>
                    </div>
                    <div class="input-box">
                        <input class="phone" type="text" name="" id="" placeholder="请输入手机号码" v-model="phone">
                        <p class="yzm-box clearfix">
                            <input class="phone" v-model="phoneYzm" type="text" name="" id="" placeholder="请输入手机验证码">
                            <span class="fasong" :class="[isShow ? 'huise' : '']" @click="yzm()">{{button}}</span>
                        </p>
                        <input class="login-button" type="button" name="" id="" value="登录" @click="loginButton()">
                    </div>
                    <p class="login-xy">登录即代表同意<span>《简单约玩用户协议》</span></p>
                </div>
                <div class="login-box-right">
                    <p class="login-ewm">
                        <img src="../assets/img/login/QR-icon.png" width="200" alt="">
                    </p>
                    <span class="ewm-title">扫码下载简单约玩APP</span>
                    <!-- <span class="wx-login qq-login">QQ登陆</span> -->
                    <span class="wx-login" @click="wxLoginLink()"><img src="../assets/img/wxLogin.png" alt="">微信登陆</span>
                </div>
            </div>
        </Modal>
    </div>
</template>
<script>
import apiHttp from '../api/index.js'
export default {
    props:['login','wxCode'],
    data(){
        return{
            phone:'',
            phoneYzm:'',
            button:'发送验证码',
            time:0,
            isShow:false
        }
    },
    mounted(){
        if(this.$route.query.code != undefined){
            this.loginButton()
        }
    },
    methods:{
        // 关闭弹框
        colseBox(){
            this.$emit("colseValue",false)
        },
        // 发送验证码
        yzm(){
            if(this.button == '发送验证码' || this.button == '获取验证码'){
                let reg=11 && /^((13|14|15|17|18|19|16)[0-9]{1}\d{8})$/
                if(this.phone==''){
                    this.$Message.warning('请输入手机号码')
                }else if(!reg.test(this.phone)){
                    this.$Message.warning('手机格式不正确')
                }else{
                    this.time = 60
                    apiHttp.apiLogin.yzm(this.phone,0,'',resp=>{
                        if(resp.code == 200){                          
                            this.$Message.success('验证码发送成功')
                        }
                    })
                    this.timer()
                }  
            }
        },
        timer() {
            if (this.time > 0) {
                this.time--
                this.button=this.time+"s后重新获取"
                this.isShow = true
                setTimeout(this.timer, 1000)
            } else{
                this.time = 0
                this.button = "获取验证码"
                this.isShow = false
            }
        },
        // 登陆
        loginButton(){
            let parmes = {}
            if(this.wxCode == '' || this.wxCode == undefined){
                parmes.phone = this.phone
                parmes.code = this.phoneYzm
            }else{
                parmes.code = this.wxCode
                parmes.type = 12
            }
            apiHttp.apiLogin.login(parmes,resp=>{
                if(resp.code == 200){
                    this.$store.state.token = resp.data
                    localStorage.setItem('token',resp.data)     
                    this.colseBox()    
                    this.$Message.success('登陆成功')   
                    this.$router.push({
                        path: '/'
                    })                
                }else{
                    this.$Message.success('登陆失败')
                }
            })
        },
        // 微信登录跳转
        wxLoginLink(){
            window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx2533aacf8ed1c076&redirect_uri=http%3a%2f%2fwww.jdyuewan.net&response_type=code&scope=snsapi_login&state=38315ff8767e77c485ab08ad26448a69#wechat_redirect` 
        },
    }
}
</script>
<style scoped>
.vertical-center-modal{
    display: flex;
    align-items: center;
    justify-content: center;
}
.ivu-modal{
    top: 0;
}
</style>


